<template>
	<view class="u-rela">
		<image class="page-bg"
			:src="data.resource == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-wl-1.png' : data.resource"
			mode="widthFix"></image>
		<!-- 播放图标 -->
		<!-- <u-icon class="icon-play" color="#fff" size="80" name="play-circle-fill"></u-icon> -->
		<view class="page-wrap">
			<view class="u-font-44 blod">{{ data.first_title }}</view>
			<view class="desc">
				<view class="u-font-28 u-m-t-40" v-html="data.content">
				</view>
				<!-- 地图 -->
				<image class="map" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/vallige/img-1.png"
					mode="widthFix"></image>
				<view class="u-font-38 blod u-m-t-20">余江信息</view>
				<!-- 辖区 -->
				<view class="xiaqu-wrap">
					<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/vallige/text-bg-1.png"
						mode="widthFix"></image>
					<view class="content">
						<text class="green u-font-30">余江</text>
						<text class="u-font-30">区辖</text>
						<view class="line"></view>
						<view class="u-font-26">
							11个乡镇、1个街道、2个场、1个办事处
						</view>
					</view>
				</view>
				<view class="town-wrap u-m-t-34">
					<div class="item" v-for="(item,index) in list">{{item.name}}</div>
				</view>
				<view class="town-wrap town-wrap2 u-m-t-30">
					<div class="item" v-for="(item,index) in list2">{{item.name}}</div>
				</view>
				<view class="btn-wrap">
					<view class="see-btn" @click="goVillages">查看传统村落</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				data: {
					resource: '',
					content: ''
				},
				list: [{
						name: '锦江镇'
					},
					{
						name: '潢溪镇'
					},
					{
						name: '中童镇'
					},
					{
						name: '马荃镇'
					},
					{
						name: '画桥镇'
					},
					{
						name: '春涛镇'
					},
					{
						name: '平定乡'
					},
					{
						name: '杨溪乡'
					},
					{
						name: '洪湖乡'
					},
					{
						name: '黄庄乡'
					},
					{
						name: '刘家站乡'
					},
				],
				list2: [{
						name: '邓埠街道'
					},
					{
						name: '生态林场总场'
					},
					{
						name: '水产粮种场'
					},
					{
						name: '龙岗办事处'
					},
				],
			}
		},
		methods: {
			getData() {
				this.$http({
					url: this.api.yujiang_more,
					method: 'GET',
					data: {}
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
					}
				})
			},
			goVillages() {
				uni.navigateTo({
					url: `/pages/vallige-travel/index`
				})
			},
		},
		onReady() {
			this.getData()
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: relative;
		width: 750rpx;
		height: 480rpx;
		z-index: 1;
	}

	.icon-play {
		position: absolute;
		top: 190rpx;
		left: 345rpx;
		z-index: 2;
	}

	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
		padding-bottom: 0;

		.desc {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
			margin-top: 20rpx;
		}

		.map {
			width: 690rpx;
			height: 1170rpx;
			margin-top: 20rpx;
		}

		.xiaqu-wrap {
			width: 701rpx;
			height: 101rpx;
			position: relative;
			z-index: 0;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.content {
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				padding-left: 35rpx;
				color: #333;
			}

			.line {
				width: 1px;
				height: 50rpx;
				background: #333333;
				opacity: 0.25;
				margin: 0 30rpx;
			}
		}

		.town-wrap {
			display: grid;
			grid-template-columns: repeat(3, 210rpx);
			gap: 30rpx;

			.item {
				width: 210rpx;
				height: 66rpx;
				background: #F8F5F2;
				border: 1px solid #DAC7B5;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #955F2A;
			}
		}

		.town-wrap2 {

			.item {
				background: #E2F8EC;
				border: 1px solid #A3E1BF;
				color: #07C160;
			}
		}

		.btn-wrap {
			width: 750rpx;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 32px 4px rgba(216, 221, 230, 0.75);
			margin-top: 150rpx;
			position: relative;
			margin-left: -30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.see-btn {
			width: 660rpx;
			height: 100rpx;
			background: #07C160;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			color: #fff;
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>